<template>
  <div style="margin-top: 15px;" v-loading="loadings">
    <!-- 专业定位 -->
    <div class="orientation-container">
      <div class="nav-section">
        <div class="nav-block">
          <img src="~@/assets/images/icon_home.png">
          <span class="title">方案设计</span>
          <span>管理方案</span>
          <i class="el-icon-arrow-right"></i>
          <span>定位专业</span>
        </div>
        <div class="stu-info" v-if="infos.userType == 3">
          <span>{{ users.name }}</span>
          <span>{{ users.sex == 0 ? '男' : '女' }}</span>
          <span>{{ users.major | filterMajor }}</span>
          <span>分数：{{ users.score }}</span>
          <span>位次：{{ users.precedence }}</span>
        </div>
      </div>
      <div class="form-section">
        <div class="tips">
          <i class="el-icon-warning-outline"></i>选择大学专业对考生未来发展至关重要。考生被喜欢、擅长且符合自身特质特点的专业录取，有助于调动学习的积极性、主动性，甚至激发潜能，从而给未来的升学或就业打好坚实基础。因此，我们选择从“专业意向度”“学科擅长度”“职业兴趣倾向”三个方面引导考生探索最为适合的大学专业方向。
        </div>
        <div class="title-block">
          <img src="~@/assets/images/dw_title_bg.png"/>
          <div class="title">专业意向度测量</div>
        </div>
        <p class="tips-txt">
          意向是人对事物的反应倾向，即行为的准备状态，也叫做意图、意动。常言道：“心之所向，身之所往”，一个人对某事物产生了强烈意向，行动上就会自然地跟上，成功的概率也会增大。因此，选择大学专业，是否有意向很重要。尽管中学生没有丰富的职业经历，但是在基因遗传和成长环境的影响下，通过对大学专业的探索和了解，依旧能够比较准确的选择出自己较为心仪的专业方向。
        </p>
        <div class="tips-block">
          <i class="el-icon-warning-outline"></i>
          <div>
            <p>“体检限制”与“建立档案”页考生体检结论相关联，供选择专业参考。</p>
          </div>
        </div>
        <div class="table-section">
          <div class="category-table" style="margin-right: 20px">
            <div class="category-column">
              <div class="category-th">门类</div>
              <div class="category-td" v-for="item in categoryList"
                   :class="currentCategoryId === item.id ? 'category-td-checked' : ''" @click="chooseCategoryFn(item)">
                {{ item.name }}
              </div>
            </div>
            <div class="category-column">
              <div class="category-th">专业类</div>
              <div class="category-td check-box"
                   :class="currentCategoryId === item.parentId && item.isClick ? 'category-td-checked' : ''"
                   v-for="item in majorList" :key="item.id" @click="viewProfessionFn(item)">
                <span v-if="currentCategoryId === item.parentId">{{ item.name }}</span>
                <el-checkbox v-if="currentCategoryId === item.parentId" v-model="item.checked"
                             @change="checkedMajorFn(item)"></el-checkbox>
              </div>
            </div>

            <div class="category-column">
              <div class="category-th">专业</div>
              <div class="category-td-r" v-for="item in currentProfessionList">
                <div class="check-box" >
                  <span class="cursor" @click="goMajorPage(item)">{{ item.name }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 选中的专业 -->
        <p class="tips-txt indent-2">
          选择的专业
        </p>
        <div class="subject-test">
          <div class="test-content" v-for="item in checkedMajorData" >
            <span class="major-name">{{ item.name }}</span>
            <div class="rate-box">
              <el-rate v-model="item.score" show-text :colors="colors" :texts="majorRateTexts" text-color="#666666" @change="rateMajorFn(item),action = true">
              </el-rate>
            </div>
            <span class="del" @click="removeLikeFn(item)">删除</span>
          </div>
        </div>
      </div>


      <div class="form-section">
        <div class="title-block">
          <img src="~@/assets/images/dw_title_bg.png"/>
          <div class="title">学科擅长程度测量</div>
        </div>
        <p class="tips-txt indent-2">
          做自己擅长的事情通常会比较轻松、高效，反之，则容易焦虑、挫败。由于不同大学专业对学生的能力要求有所不同，所以学生在选择大学专业时务必要评估自己的能力结构是否能支撑学好所选
          专业。虽然，各大学专业的课程不同于中学课程，但却与中学课程有着密切的联系。我们可以通过对中学课程的擅长程度来选择大学专业。需要注意的是，在评估擅长程度时，既要看学业成绩，
          还要看自己平时的学习表现和感受。
        </p>
        <div class="subject-test">
          <div class="test-content" v-for="item in subjectList">
            <span class="name">{{ item.name }}</span>
            <div class="rate-box">
              <el-rate v-model="item.score" show-text
                       :colors="colors" :texts="subjectRateTexts" text-color="#666666" @change="action = true">
              </el-rate>
            </div>
            <span class="del" @click="clearSubjectRate(item)">清除</span>
          </div>
        </div>
      </div>

      <!-- 职业兴趣度测量 -->
      <div class="form-section">
        <div class="title-block">
          <img src="~@/assets/images/dw_title_bg.png"/>
          <div class="title">职业兴趣倾向测量</div>
        </div>
        <p class="tips-txt indent-2">
          霍兰德职业兴趣测试（Self-Directed Search）是由美国职业指导专家霍兰德（John Holland）根据他本人大量的职业咨询经验及其职业类型理论编制的测评工具，已经在全世界被广泛应用。霍兰德认为个人职业兴趣特性与职业之间有一种内在的对应关系，通过测评能够帮助测试者了解自身职业兴趣倾向，从而做好职业规划或大学专业选择。该测试属于典型行为测试，测试者只要根据自己的真实情况如实作答即可。
        </p>
        <div class="vocational-test" v-if="!showResult">
          <div class="title-box">
            <p>霍兰德职业兴趣倾向测试(SDS)</p>
            <p class="schedule">
              <span>测评进度</span><span
                style="color: #FC6621;">{{ currentIndex + 1 }}</span><span>/</span><span>{{
                questionBank.length
              }}</span>
            </p>
          </div>
          <div class="topic-section">
            <div class="topic-title"><span>{{ currentIndex + 1 }}、</span>{{ currentQuestion.topicLibraryName }}</div>
            <div class="options-box" v-for="(topicItem, topicIndex) in currentQuestion.options"
                 @click="handleTopic(topicIndex)">
              <div class="option-content" :class="{'checked': topicItem.isCheck}" >
                {{ topicItem.optionName }}
              </div>
              <div class="option-choose" :class="{'checked': topicItem.isCheck}" v-if="topicItem.isCheck">
                <i class="el-icon-check"></i>
              </div>
              <div class="option-choose" v-else>
              </div>
            </div>
          </div>
          <div class="answer-btn">
            <el-button type="primary" plain :disabled="currentIndex == 0" @click="switchTopic(0)">上一题</el-button>
            <el-button type="primary" v-if="currentIndex == questionBank.length-1" @click="submitAnswer">提交</el-button>
          </div>
        </div>
        <!-- 测试报告 -->
        <div class="result-container" v-if="showResult">
          <div class="result-section">
            <p class="title-set">{{ testName }}</p>
            <p class="report-desc">
              {{ resultsData.reportDesc }}
            </p>
            <!-- 雷达图 -->
            <div>
              <p class="txt-c title-set">{{ resultsData.tableSet.tableTitle }}</p>
              <div id="histogram" class="histogram-section"
                   :class="{'histogram-section-radar': resultsData.tableSet.tableName==1}"
                   style="margin: auto;">
              </div>
            </div>
            <!-- 学科类型 -->
            <div>
              <p class="txt-c summary-title m-t-20">{{ resultsData.tableResult.upContent }}</p>
              <p class="txt-c summary-title m-t-20">{{ resultsData.tableResult.downContent }}</p>
            </div>
            <!-- 报告内容 -->
            <div>
              <p class="txt-c title-set m-t-20">{{ resultsData.topicReport.titleWarning }}</p>

              <div class="chart-summary m-t-20"
                   v-for="(item, index) in resultsData.topicReport.topicReportList">
                <div class="summary-txt">
                  {{ item.title }}
                </div>
              </div>
            </div>

          </div>
          <div class="answer-btn" v-show="users.rank==0||this.infos.userType!=4">
            <el-button type="primary" @click="reTestFn">重新测试</el-button>
          </div>
        </div>
      </div>

      <!-- 显示结果 -->
      <div class="form-section">
        <div class="report-title">
          <div class="title-box">
            <img src="~@/assets/images/dw_title_bg.png"/>
            <div class="title">综合得分较高的前20个专业类</div>
          </div>
          <div class="view-result">
            <el-button type="primary" plain size="mini" @click="viewResultFn()">查看结果</el-button>
          </div>
        </div>
        <div class="tips-txt indent-2">
          意向指数、擅长指数、适配指数分别反映了专业意向度、学科擅长度、职业兴趣倾向的测量结果，推荐指数是三个指数的综合计算结果，反映了专业类的匹配程度。推荐指数得分越高，说明该专业类综合匹配度越高。探索结果会按照分数由高到低的顺序展示前20个专业类，不足20个时按照实际数目展示。
        </div>
        <div>
          <el-table
              :data="evaluationResultData"
              stripei
              v-loading="loading"
              style="width: 100%">
            <div slot="empty" class="empty">
              <img src="~@/assets/images/icon_empty.png"/>
              <span>在完成各项测评并点击查询结果按键可查看推荐专业</span>
            </div>
            <el-table-column
                type="index"
                label="序号"
                width="50">
            </el-table-column>
            <el-table-column
                prop="majorName"
                label="专业(类)名称">
            </el-table-column>
            <el-table-column
                prop="intention"
                label="意向指数">
              <template slot-scope="scope">
                <el-rate
                    v-model="scope.row.intention"
                    disabled
                    text-color="#ff9900"
                    score-template="{value}">
                </el-rate>
              </template>
            </el-table-column>
            <el-table-column
                prop="Proficiency"
                label="擅长指数">
              <template slot-scope="scope">
                <el-rate
                    v-model="scope.row.Proficiency"
                    disabled
                    text-color="#ff9900"
                    score-template="{value}">
                </el-rate>
              </template>
            </el-table-column>
            <el-table-column
                prop="Fitness"
                label="适配指数">
              <template slot-scope="scope">
                <el-rate
                    v-model="scope.row.Fitness"
                    disabled
                    text-color="#ff9900"
                    score-template="{value}">
                </el-rate>
              </template>
            </el-table-column>
            <el-table-column
                prop="recommend"
                label="推荐指数">
              <template slot-scope="scope">
                <el-rate
                    v-model="scope.row.recommend"
                    disabled
                    text-color="#39B830"
                    score-template="{value}">
                </el-rate>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

      <!-- 保存 -->
      <div class="answer-btn">
        <el-button type="primary" plain @click="rebackFn($event)">上一级</el-button>
        <el-button type="primary" @click="saveTestFn($event)">保存</el-button>
      </div>

    </div>

    <!-- 学生登录 -->
    <el-dialog :visible.sync="dialogVisibles" width="800px" :close-on-click-modal="false"
               style="text-align: center;font-size: 15px;">
      完成预案咨询后，“建立档案”和“定位专业”页面只能浏览，不能更改保存！
    </el-dialog>
  </div>
</template>

<script>
import {request} from "@/util/request.js"
import draggable from 'vuedraggable'

const MajorData = [
  {
    label: '理科类',
    value: 1
  },
  {
    label: '文科类',
    value: 2
  },
  {
    label: '艺术理',
    value: 3
  },
  {
    label: '艺术文',
    value: 4
  },
]
// 体检结论选项
const medicalOption = [
  {
    value: '1',
    label: '学校不可录取',
    children: [
      {
        value: '一(1)',
        label: '1'
      }, {
        value: '一(2)',
        label: '2'
      }, {
        value: '一(3)',
        label: '3'
      }, {
        value: '一(4)',
        label: '4'
      }, {
        value: '一(5)',
        label: '5'
      }, {
        value: '一(6)',
        label: '6'
      }
    ]
  },
  {
    value: '2',
    label: '有关专业可不录取',
    children: [
      {
        value: '二(1)',
        label: '1'
      }, {
        value: '二(2)',
        label: '2'
      }, {
        value: '二(3)',
        label: '3'
      }, {
        value: '二(4)',
        label: '4'
      }, {
        value: '二(5)',
        label: '5'
      }
    ]
  },
  {
    value: '3',
    label: '不宜就读专业',
    children: [
      {
        value: '三(1)',
        label: '1'
      }, {
        value: '三(2)',
        label: '2'
      }, {
        value: '三(3)',
        label: '3'
      }, {
        value: '三(4)',
        label: '4'
      }, {
        value: '三(5)',
        label: '5'
      }, {
        value: '三(6)',
        label: '6'
      }, {
        value: '三(7)',
        label: '7'
      }, {
        value: '三(8)',
        label: '8'
      }, {
        value: '三(9)',
        label: '9'
      }
    ]
  },
]

export default {
  components: {draggable},
  data() {
    return {
      infos: {}, // 登录用户信息
      // 学生信息
      users: null,
      loading: false,
      loadings: false,
      // 专业
      originMajorData: [],
      categoryList: [],
      currentCategoryId: '',
      majorList: [],
      currentMajorList: [],
      currentMajorId: '',
      professionList: [],
      currentProfessionList: [],
      colors: ['#F96630', '#F96630', '#F96630'],
      majorRateTexts: ['不喜欢', '能接受', '有意向', '喜欢', '特喜欢'],
      action: false,
      checkedMajorData: [],
      // 学科
      subjectList: [],
      subjectRateTexts: ['很不擅长', '不太擅长', '中等水平', '比较擅长', '特别擅长'],
      // 测试题
      showResult: true,
      questionBank: [],
      currentQuestion: {},
      currentIndex: 0,
      testId: "",
      testName: "",
      studentForm: {
        id: "",
        stuName: "",
        schoolName: "",
        phone: ""
      },
      // 测评结果
      evaluationResultData: [],
      chartThemeColor: ['#37A2DA', '#dd6b66', '#c23531', '#4EA397', '#8D98B3'], // 图表色系
      resultsData: {
        id: "",
        testId: "",
        reportDesc: "",
        isShowReportDesc: 0,
        tableSet: {},
        isShowTableSet: 0,
        tableResult: {},
        isShowTableResult: 0,
        topicReport: {},
        isShowTopicReportList: [],
        moreSuggestTitle: "",
        moreSuggest: "",
        isShowMoreSuggest: 0,
        reportResult: {},
        isShowReportResult: 0,
        lastImage: [],
        isShowLastImage: []
      },
      neweditForm: [],
      // 学生登录
      stuId: "",
      // 旧版数据
      dialogVisibles: false,
    }
  },
  filters: {
    filterMajor (value) {
      const major = MajorData.find((item) => item.value ==  value)
      return major.label
    },
  },
  mounted() {
    const that = this
    window.onresize = () => {
      return (() => {
        // 图标数据
        that.chartsInfo();
      })()
    }
  },
  methods: {
    sjfa() {
      const user = sessionStorage.getItem("user");
      let stu = JSON.parse(user)
      if (stu.userType == 4) {
        this.$router.push({
          path: "/design/management"
        })
      } else {
        this.$router.push({
          path: "/ManagementCenter"
        })
      }

    },
    jlda() {
      this.$router.push({
        path: "/designV2/stuarchives"
      })
    },
    rebackFn() {
      this.$router.push({
        path: "/designV2/management"
      })
    },
    saveTestFn(e) {
      if (this.users.rank == 1 && this.infos.userType == 4) {
        this.$message.error("当前内容不可更改！")
      } else {
        this.preservation()
      }
    },
    reTestFn() {
      this.showResult = false
      this.resultsData.id = ''
    },
    // 查看结果
    viewResultFn() {
      if (this.action == true) {
        this.$message.error("请先保存！")
        return false;
      }
      let chooseMajorCount = 0;
      let chooseSubjectCount = 0;
      this.originMajorData.forEach(i => {
        if (i.score > 0) {
          chooseMajorCount = 1;
        }
      })
      this.subjectList.forEach(q => {
        if (q.score > 0) {
          chooseSubjectCount = 1;
        }
      })
      if (chooseMajorCount > 0 && chooseSubjectCount > 0 && this.showResult) {
        this.loading = true
        request({
          method: 'post',
          url: 'stuMajorResult/showResult',
          data: {
            stuMajorRel: this.originMajorData,
            stuSubjectRel: this.subjectList,
            mathTests: this.resultsData.tableSet.tableTestMsg
          }
        }).then(res => {
          this.evaluationResultData = res.data
          this.loading = false
        })
      } else {
        this.$message({
          message: '请先完成意向度，擅长度评分及职业兴趣倾向测量后再查看结果！',
          type: 'error'
        });
      }

    },
    preservation() {
      this.loadings = true

      let chooseSubjectList = []
      this.subjectList.forEach(z => {
        if (z.score >= 0) {
          chooseSubjectList.push({
            "id": z.relId ? z.relId : null,
            "stuId": this.stuId,
            "subjectId": z.id,
            "score": z.score
          })
        }
      })

      let chooseMajorList = []
      this.originMajorData.forEach(i => {
        if (i.level == 2 && i.score >= 0) {
          chooseMajorList.push({
            "id": i.relId ? i.relId : null,
            "stuId": this.stuId,
            "maojorId": i.id,
            "score": i.score,
            "sort": i.sort
          })
        }
      })

      request({
        method: 'post',
        url: 'stuMajorRel/preservationLocation',
        data: {
          stuMajorRel: chooseMajorList,
          stuSubjectRel: chooseSubjectList
        }
      }).then(res => {
        if (res.code == 0 || res.code == 200) {
          this.$message({
            message: '保存成功！',
            type: 'success'
          });
          this.loadings = false
          this.action = false
        } else {
          this.$message({
            message: '保存失败~',
            type: 'error'
          });
        }
        this.getSubjectName()
        this.getMajor()
      })
    },
    getMendaoStu() {
      request({
        method: 'get',
        url: 'mendao/getMenDaoStu',
        params: {
          phone: this.stuId
        }
      }).then(res => {
        this.neweditForm = res.data
        if (this.neweditForm != null && res.data != null) {
          this.getResultDetails();
        } else {
          const tz = [{id: null}]
          this.neweditForm = tz
          this.showResult = false
        }
      })
    },
    // 获取测评详情
    getTestDetail() {
      request({
        method: 'get',
        url: 'mendao/getTestById',
        params: {
          data: JSON.stringify({
            testId: this.testId
          })
        }
      }).then((res) => {
        if (res.code === 1) {
          this.testName = res.data.testName;
        } else {
          this.$message.error(res.data.message);
        }
      }).catch((res) => {
      });
    },
    getResultDetails() {
      let _this = this;
      request({
        method: 'post',
        url: 'mendao/showCommitTest',
        data: {
          testId: _this.testId,
          stuId: this.neweditForm.id
        }
      }).then((res) => {
        if (res.code === 1) {
          this.resultsData = res.data;
          this.resultsData.reportResult = JSON.parse(res.data.reportResult)
          this.getTestReportDetail()
        } else {
          this.$message.error(res.data.message);
        }
      }).catch((res) => {
      });
    },
    // 获取测评结果详情
    getTestReportDetail() {
      request({
        method: 'get',
        url: 'mendao/getTestReport',
        params: {
          data: JSON.stringify({
            testId: this.testId
          })
        }
      }).then((res) => {
        if (res.code === 1) {
          let dataObj = JSON.parse(JSON.stringify(res.data));
          // 整理题组标题
          if (this.resultsData.topicReport.topicReportList) {
            for (let i = 0; i < this.resultsData.topicReport.topicReportList.length; i++) {
              let titleObj = {
                text: this.resultsData.topicReport.topicReportList[i].title
              };
              this.resultsData.topicReport.topicReportList[i].formatTitle = titleObj;
            }
          }

          if (this.resultsData.moreSuggest) {
            for (let i = 0; i < this.resultsData.moreSuggest.length; i++) {
              let suggestTitle = {
                text: this.resultsData.moreSuggest[i].title
              };
              this.resultsData.moreSuggest[i].formatTitle = suggestTitle;
            }
          }
          if (this.resultsData.reportResult.title && this.resultsData.isShowReportResult == 1) {
            let resultTitle = {
              text: this.resultsData.reportResult.title
            };
            this.resultsData.reportResult.formatTitle = resultTitle;
          }

          // 图标数据
          this.chartsInfo();

          setTimeout(() => {
            if ((this.users.rank==0) || (this.infos.userType!=4)) {
              this.viewResultFn()
            }
          }, 2000)

        } else {
          this.$message.error(res.message);
        }
      }).catch((res) => {
      });
    },
    // 图表设置
    chartsInfo() {
      // 获取色系 chartThemeColor
      let chartColor = '#c23531';
      if (this.resultsData.tableSet.tableColor) {
        chartColor = this.chartThemeColor[this.resultsData.tableSet.tableColor - 1]
      }

      let baryAxisData = [];
      let barSeriesData = [];
      let radaryAxisData = [];
      let radarSeriesData = [];
      let maxNum = 0;
      for (let i = 0; i < this.resultsData.tableSet.tableTestMsg.length; i++) {

        let yObj = {
          name: this.resultsData.tableSet.tableTestMsg[i].unitName,
          max: 5
        };
        if (this.resultsData.tableSet.tableTestMsg[i].unitScore == 'null') {
          this.resultsData.tableSet.tableTestMsg[i].unitScore = '0';
        }
        maxNum = (maxNum - this.resultsData.tableSet.tableTestMsg[i].unitScore) > 0 ? maxNum : this.resultsData
            .tableSet.tableTestMsg[i].unitScore;
        baryAxisData.push(this.resultsData.tableSet.tableTestMsg[i].unitName);
        barSeriesData.push(this.resultsData.tableSet.tableTestMsg[i].unitScore);
        radaryAxisData.push(yObj);
        radarSeriesData.push(this.resultsData.tableSet.tableTestMsg[i].unitScore);
      }

      radaryAxisData.forEach(e => {
        e.max = maxNum;
      });

      let _this = this;
      // 获取图标类型
      if (this.resultsData.tableSet.tableName == 2) { // 条形图
        setTimeout(() => {
          this.barChartUtil(chartColor, baryAxisData, barSeriesData);
        }, 100);
      } else if (this.resultsData.tableSet.tableName == 1) { // 雷达图
        setTimeout(() => {
          _this.radarChartUtil(chartColor, radaryAxisData, radarSeriesData);
        }, 100);
      }
      this.showResult = true
    },
    // 条形图
    barChartUtil(chartColor, yAxisData, seriesData) {
      let histogramDom = document.getElementById("histogram");
      let histogramChart = this.$echarts.init(histogramDom);

      seriesData = seriesData.reverse();
      yAxisData = yAxisData.reverse();

      histogramChart.setOption({
        color: [chartColor],
        title: {
          text: this.resultsData.tableTitle ? this.resultsData.tableTitle : '图表数据',
          textAlign: 'left',
          textStyle: {
            fontSize: 14,
            fontStyle: 'normal',
            fontWeight: 'normal',
          },
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01,],
          max: 100
        },
        yAxis: {
          type: 'category',
          data: yAxisData,
        },
        grid: {
          left: 70
        },
        series: [{
          type: 'bar',
          data: seriesData,
        }]
      }, true);
    },
    // 雷达图
    radarChartUtil(chartColor, yAxisData, seriesData) {
      let histogramDom = document.getElementById("histogram");
      let histogramChart = this.$echarts.init(histogramDom);
      for (let i = 0; i < yAxisData.length; i++) {
        yAxisData[i].max = 10;
      }
      histogramChart.setOption({
        color: [chartColor],
        title: {
          // text: "111雷达图雷达图雷达图雷达图雷达图雷达图雷达图雷达图222",
          text: this.resultsData.tableTitle ? this.resultsData.tableTitle : '图表数据',
          subtext: '',
          // textAlign:'center',
          textStyle: {
            fontSize: 14,
            lineHeight: 20,
          },
          // 标题的位置，此时放在图的底边
          left: 'center',
          top: 'top',
        },
        tooltip: {},
        radar: {
          name: {
            textStyle: {
              color: '#fff',
              backgroundColor: '#999',
              borderRadius: 3,
              padding: [3, 5],
              textAlign: "center"
            }
          },
          indicator: yAxisData
        },
        series: [{
          type: 'radar',
          data: [{
            value: seriesData,
            name: this.resultsData.tableTitle,
            label: {
              normal: {
                show: true,
                formatter: function (params) {
                  return params.value
                }
              }
            }
          }]
        }]
      }, true);
    },
    // 获取测评题目库
    getTopicList() {
      request({
        method: 'get',
        url: 'mendao/getTopicLibrary',
        params: {
          data: JSON.stringify({
            testId: this.testId,
            type: 1,  // 前台获取
          })
        }
      }).then((res) => {
        if (res.code === 1) {
          for (let i = 0; i < res.list.length; i++) {
            let tempObj = {
              testId: this.testId,
              topicLibraryName: res.list[i].topicLibraryName,
              topicGroupId: res.list[i].topicGroupId,
              options: res.list[i].options ? JSON.parse(res.list[i].options) : [],
            };
            for (let j = 0; j < tempObj.options.length; j++) {
              tempObj.options[j].isCheck = false;
            }
            this.questionBank.push(tempObj);
          }
          this.currentQuestion = this.questionBank[this.currentIndex];
        } else {
          this.$message.error(res.data.message);
        }
      }).catch((res) => {
      });
    },
    // 操作题目
    handleTopic(topicIndex) {
      for (let i = 0; i < this.currentQuestion.options.length; i++) {
        this.currentQuestion.options[i].isCheck = false;
      }
      this.currentQuestion.options[topicIndex].isCheck = true;
      this.questionBank[this.currentIndex] = this.currentQuestion;
      setTimeout(e => {
        this.switchTopic(1)
      }, 500)
    },
    // 上一题协议提
    switchTopic(num) {
      if (this.users.rank == 1) {
        this.$alert('完成预案咨询后，“建立档案”和“定位专业”页面只能浏览，不能更改保存！', '提示', {
          confirmButtonText: '确定',
        });
      }
      let count = 0;
      if (num == 1) {
        if (this.currentIndex != this.questionBank.length - 1) {
          for (let i = 0; i < this.currentQuestion.options.length; i++) {
            if (this.currentQuestion.options[i].isCheck == true) {
              count++;
            }
          }
        }
      }
      if (num === 1 && count > 0) {
        if (this.currentIndex != this.questionBank.length - 1) {
          this.currentIndex += num;
          this.currentQuestion = this.questionBank[this.currentIndex];
        }
      } else if (num === 0) {
        this.currentIndex -= num + 1;
        this.currentQuestion = this.questionBank[this.currentIndex];
      } else {
        if (this.currentIndex != 59) {
          this.$alert('答完本题才能进入下一题哦', '提示', {
            confirmButtonText: '确定',
          });
        }
      }
    },
    // 提交答题
    submitAnswer() {
      let params = {
        testId: this.testId,
        list: []
      };
      for (let i = 0; i < this.questionBank.length; i++) {
        for (let j = 0; j < this.questionBank[i].options.length; j++) {
          if (this.questionBank[i].options[j].isCheck) {
            let tempObj = {
              score: this.questionBank[i].options[j].optionScore,
              topicGroupId: this.questionBank[i].topicGroupId
            };
            params.list.push(tempObj);
          }
        }
      }
      this.studentForm.id = this.neweditForm.id
      this.studentForm.stuName = this.users.name
      this.studentForm.schoolName = this.users.school
      this.studentForm.stuId = this.stuId
      params = Object.assign(params, this.studentForm)

      let this_ = this
      request({
        method: 'post',
        url: 'mendao/commitTest',
        data: params,

      }).then(res => {
        if (res.code === 1) {
          this.$message({
            type: 'success',
            message: '成功!'
          });
          this.saveTestFn()
          this.getMendaoStu()
          setTimeout(() => {
            if ((this.users.rank==0) || (this.infos.userType!=4)) {
              this.viewResultFn()
            }
          }, 2000)
        } else {
          this.$message({
            showClose: true,
            message: res.data.message,
            type: 'error'
          });
        }
      }).catch((res) => {
        this_.$message({
          showClose: true,
          message: '网路错误，请求失败',
          type: 'error'
        });
      });

    },
    // 获取专业信息
    getMajor() {
      request({
        method: 'get',
        url: 'majorCategoryInfo/getMajors',
        params: {
          stuId: this.stuId
        }
      }).then(res => {
        this.originMajorData = res.data // 原始专业数据
        this.getStuMajor()
        this.getStuSubject()
      })
    },
    // 获取学生专业
    getStuMajor() {
      request({
        method: 'get',
        url: 'stuMajorRel/getStuMajor',
        params: {
          stuId: this.stuId
        }
      }).then(res => {
        for (let i = 0; i < res.data.length; i++) {
          for (let j = 0; j < this.originMajorData.length; j++) {
            if (res.data[i].maojorId == this.originMajorData[j].id) {
              if (res.data[i].level == 2) {
                if (res.data[i].score == null || res.data[i].score == undefined) {
                  this.$set(this.originMajorData[j], "score", 0)
                  this.$set(this.originMajorData[j], "relId", res.data[i].id)
                  this.$set(this.originMajorData[j], "sort", res.data[i].sort)
                } else {
                  this.$set(this.originMajorData[j], "score", res.data[i].score)
                  this.$set(this.originMajorData[j], "relId", res.data[i].id)
                  this.$set(this.originMajorData[j], "sort", res.data[i].sort)
                }
              } else {
                this.$set(this.originMajorData[j], "score", res.data[i].score)
                this.$set(this.originMajorData[j], "relId", res.data[i].id)
                this.$set(this.originMajorData[j], "sort", res.data[i].sort)
              }
            }
          }
        }
        this.formatMajorFn()
      })
    },
    // 整理专业数据
    formatMajorFn() {

      let data = this.originMajorData
      let firstData = []
      let secondData = []
      // level 1数据
      for (let i = 0; i < data.length; i++) {
        if (data[i].level == 1) {
          firstData.push(data[i])
        }
        if (data[i].level == 2) {
          secondData.push(data[i])
        }
        if (data[i].level == 3) {
          this.professionList.push(data[i])
        }
      }
      // level 2数据
      for (let i = 0; i < firstData.length; i++) {
        for (let j = 0; j < secondData.length; j++) {
          if (secondData[j].parentId == firstData[i].id) {
            secondData[j].checked = secondData[j].score > 0
            secondData[j].isClick = false
            firstData[i].childData = [].concat(secondData[j])
            this.checkedMajorFn(secondData[j])
          }
        }
      }
      this.categoryList = firstData
      this.currentCategoryId = this.categoryList[0].id
      this.majorList = secondData
      this.majorList[0].isClick = true
      this.currentMajorId = this.categoryList[0].childData[0].id
      this.getCurrentProfess(this.professionList);

    },
    // 整理当前专业
    getCurrentProfess(list) {
      let tempList = []
      for (let i = 0; i < list.length; i++) {
        if (list[i].parentId == this.currentMajorId) {
          tempList.push(list[i])
        }
      }
      this.currentProfessionList = tempList
    },
    // 选中类目
    chooseCategoryFn(item) {
      this.currentCategoryId = item.id
      let list = []
      for (let i = 0; i < this.majorList.length; i++) {
        if (this.majorList[i].parentId == item.id) {
          list.push(this.majorList[i])
          this.majorList[i].isClick = true
          break
        }
      }
      this.currentMajorId = list[0].id
      this.getCurrentProfess(this.professionList)
    },
    // 点击专业
    viewProfessionFn(item) {
      this.majorList.forEach((e) => e.isClick = false);
      item.isClick = true
      this.currentMajorId = item.id
      this.getCurrentProfess(this.professionList)
    },
    // 选中专业数据
    checkedMajorFn(item) {
      this.currentMajorId = item.id
      this.getCurrentProfess(this.professionList);
      if (item.checked) {
        this.checkedMajorData.push(item)
      } else {
        this.checkedMajorData = this.checkedMajorData.filter(e => e.id !== item.id)
      }
      this.$forceUpdate();
    },
    // 专业打分
    rateMajorFn (item) {
      this.majorList.forEach((e) => {
        if (e.id == item.id) {
          e.score = item.score
        }
      })
    },
    // 移除喜欢专业
    removeLikeFn(item) {
      this.majorList.forEach(e => {
        if (e.id == item.id) {
          e.checked = false
          e.isClick = false
          e.score = 0
        }
      })
      this.checkedMajorData = this.checkedMajorData.filter(e => e.id !== item.id)
    },

    // 获取学科数据
    getSubjectName() {
      request({
        method: 'Get',
        url: 'subjectInfo/getSubjectName',
      }).then(res => {
        this.subjectList = res.data
      })
    },
    // 获取学生学科数据
    getStuSubject() {
      request({
        method: 'get',
        url: 'stuSubjectRel/getStuSubject',
        params: {
          stuId: this.stuId
        }
      }).then(res => {
        for (let i = 0; i < res.data.length; i++) {
          for (let j = 0; j < this.subjectList.length; j++) {
            if (res.data[i].subjectId == this.subjectList[j].id) {
              this.$set(this.subjectList[j], "score", res.data[i].score)
              this.$set(this.subjectList[j], "relId", res.data[i].id)
            }
          }
        }
      })
    },
    // 清除学科擅长程度
    clearSubjectRate(item) {
      item.score = 0
    },

    getstu() {
      request({
        method: 'get',
        url: 'students/getStu',
        params: {
          Id: this.infos.userId
        }
      }).then(res => {
        this.users = res.data
        if (this.users.rank == 1) {
          this.dialogVisibles = true
        }
        this.stuId = this.users.id
        this.getMajor()
        this.getMendaoStu();
      })
    },

    // 跳转到专业解读界面
    goMajorPage (row) {
      const routeData = this.$router.resolve({
        path: '/speciality/majorsDetail',
        query: {
          name: row.name
        }
      })
      window.open(routeData.href, '_blank')
    }

  },
  created() {
    this.infos = this.$route.params.info
    this.infos = JSON.parse(sessionStorage.getItem('user'))
    this.testId = 1;
    // 用户类型1:超级管理员2:管理员3:专家4:体验专家5:会员,6:体验会员,7:普通用户
    if (this.infos.userType == 3) {
      this.users = JSON.parse(localStorage.getItem('stu'))
      this.stuId = this.users.id
      this.getMajor(); // 获取专业
      this.getMendaoStu();
    } else if (this.infos.userType == 4) {
      this.getstu()
    }

    this.getSubjectName()

    this.getTopicList();

    this.getTestDetail();

  },
}
</script>

<style lang="stylus" scoped>
.orientation-container
  .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf
    border-bottom: 0;
</style>
<style lang="stylus" scoped>
pageWidth = 1400px
$color-theme = #FC6621
.orientation-container
  width: pageWidth;
  margin: 0 auto;
  font-size: 14px;

  div
    box-sizing: border-box;

  .cursor
    cursor pointer

  .bor-r
    border-right: 1px solid #ddd;

  .nav-section
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 20px 0;
    font-size: 16px;

    .nav-block
      flex 1
      display: flex;
      justify-content: flex-start;
      align-items: center;

      .title
        width: 100px;

      img
        display: block;
        width: 18px;
        height: 18px;
        margin-right: 10px;

      i
        margin: 0 2px;

    .stu-info
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 166px;
      height: 40px;
      padding: 0 10px;
      font-size: 14px;
      color: #333;

      img
        display: block;
        width: 18px;
        margin-right: 20px;
      span
        margin-left: 10px;


  .answer-btn
    padding: 20px 0;
    text-align: center;

  .form-section
    box-sizing: border-box;
    padding: 0 10px;
    background: #fff;
    border-radius: 6px;

    .title-block
      position: relative;
      width: 100%;
      padding: 20px 0;
      font-size: 18px;

      .title
        position: absolute;
        top: 20px;
        left: 45px;
        z-index: 0;
        line-height: 30px;
        color: #fff;

      img
        display: block;
        width: 224px;
        height: 30px;

    .tips
      padding-top: 20px;
      font-size: 16px;
      color: #999;

      i
        margin-right: 5px;

    .tips-txt
      padding: 5px 30px;
      line-height: 28px;
      font-size: 16px;
      color: #333333;

    .tips-block
      display: flex;
      align-items: flex-start;
      line-height: 28px;
      font-size: 16px;
      color: #999;

      i
        margin-top: 6px;
        margin-right: 11px;

    .table-section
      width: 100%;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;

      .category-table
        position: relative;
        flex: 1;
        border: 1px solid #ddd;
        display: flex;
        align-items: flex-start;
        justify-content: center;

        &:before
          position: absolute;
          top: 0;
          left: 33.3%;
          margin-left: -2px;
          content: ' ';
          width: 1px;
          height: 100%;
          border-right: 1px solid #ddd;

        &:after
          position: absolute;
          top: 0;
          left: 66.7%;
          margin-left: -2px;
          content: ' ';
          width: 1px;
          height: 100%;
          border-right: 1px solid #ddd;

        .category-column
          width: 33.3%;
          height: 100%;

        .category-th
          padding: 0 20px;
          line-height: 36px;
          background: #F9F9F9;

        .category-td, .category-td-r
          padding: 0 20px;
          line-height: 36px;
          color: #333333;
          background: #fff;

        .category-td-checked, .category-td:hover
          color: #FC6621;
          background: #FFF2E7;
          border-left: 2px solid #FC6621;

        .check-box
          display: flex;
          align-items: center;
          justify-content: space-between;
          cursor: pointer;

          i
            color: #F96630;
            cursor: pointer;

      .profession-table
        flex: 1;

    .subject-test
      box-sizing: border-box;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-start;
      width: 100%;
      padding: 0 30px;

      .test-content
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 33.3%;
        height: 50px;
        padding: 0 10px;

        .name
          width: 48px;
          color: #333333;

        .rate-box
          width: 186px;
          padding-left: 10px;
          cursor: pointer;

        .del
          width: 40px;
          text-align: right;
          color: #FC6621;
          cursor: pointer;

    .vocational-test
      color: #333333;
      background: #F9F9F9;

      .title-box
        height: 60px;
        line-height: 60px;
        text-align: center;
        font-size: 18px;
        display: flex;
        justify-content: center;

        .schedule
          margin-left: 50px;
          font-size: 16px;

      .topic-section
        width: 1000px;
        margin: 0 auto;
        font-size: 20px;
        color: #333;
        font-weight: PingFangMedium600;

        .topic-title
          padding: 20px 0;

        .options-box
          display: flex;
          justify-items: center;
          align-items: center;
          cursor: pointer;
          width: 1000px;
          margin: 0 auto;

          .option-content
            flex: 1;
            line-height: 32px;
            &.checked
              color: $color-theme

          .option-choose
            display: flex;
            align-items: center;
            width: 18px;
            height: 18px;
            font-size 16px
            border: 1px solid #DDDDDD;
            border-radius: 4px;

            i
              color: $color-theme;

            &.checked
              color: #fff;
              border: 1px solid $color-theme;

          .color-main
            color: $color-theme;


    .result-container
      width: 100%;

      .result-section
        .title-set
          padding: 5px 0;
          font-size: 18px;
          color: #333;
          text-align: center;
          font-weight: 500;

        .report-desc
          padding: 5px 30px;
          font-size: 16px;
          color: #666;
          text-indent: 2em;

        .histogram-section
          width: 100%;
          height: 200px;

        .histogram-section-radar
          width: 420px;
          height: 440px;
          margin: auto;
          transform: scale(0.8);

        .txt-c
          text-align: center;

        .summary-title
          font-size: 16px;
          color: #333;

        .chart-summary
          padding: 10px 10px;
          border-radius: 4px;

        .summary-txt
          padding: 12px 30px 0 30px
          line-height 28px
          text-indent: 2em;
          font-size: 14px;

    .report-title
      position: relative;
      width: 100%;
      height: 30px;
      padding: 20px 0;
      display: flex;
      align-items: center;
      justify-content: flex-start;

      .title-box
        position relative
        width: 290px;
        height: 30px;

        .title
          position: absolute;
          left: 25px;
          top: 0;
          line-height: 30px;
          font-size: 18px;
          color: #fff;

        img
          display: block;
          width: 290px;
          height: 30px;

      .view-result
        height: 30px;
        margin-left 40px
        //text-align: right;

    .empty
      padding: 50px 0;
      font-size: 14px;
      line-height: 24px;
      color: #666;
      text-align: center;
      img
        display: block;
        width: 39px;
        height: 43px;
        margin: 20px auto;
</style>
